<template>
  <div class="app-container">
    <v-row justify="center">
      <v-dialog
        v-model="visible"
        persistent
        transition="dialog-top-transition"
        max-width="500px">

        <v-card>
          <!-- 对话框标题 -->
          <v-card-title>
            <span style="font-size: 18px">添加岗位</span>
          </v-card-title>

          <!-- 表单 -->
          <v-form ref="form" v-model="valid">
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="12">
                    <v-text-field
                      v-model="form.postName"
                      :rules="rules.postName"
                      label="*岗位名称"
                      placeholder="请输入岗位名称"
                      required
                      clearable
                      dense
                      autofocus
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="12">
                    <v-text-field
                      v-model="form.postCode"
                      :rules="rules.postCode"
                      label="*岗位编码"
                      placeholder="请输入编码名称"
                      required
                      clearable
                      dense
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="8">
                    <v-text-field
                      type="number"
                      v-model="form.postSort"
                      :rules="rules.postSort"
                      label="*岗位顺序"
                      placeholder="请输入岗位顺序"
                      required
                      :min="0"
                      dense
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="12">
                    <v-radio-group
                      label="岗位状态"
                      v-model="form.status"
                      row dense style="margin: 0;"
                    >
                      <v-radio
                        v-for="dict in statusOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></v-radio>
                    </v-radio-group>
                  </v-col>
                  <v-col cols="12" sm="12" style="padding-bottom: 0;padding-top: 0">
                    <v-textarea
                      v-model="form.remark"
                      label="备注"
                      placeholder="请输入内容"
                      auto-grow
                      filled
                      clearable
                      dense
                    >
                    </v-textarea>
                  </v-col>
                </v-row>
              </v-container>
              <small class="ml10">*表示必需字段</small>
            </v-card-text>
          </v-form>

          <!-- 底部操作按钮 -->
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              text
              @click="updateVisible(false)">
              取消
            </v-btn>
            <v-btn
              color="blue darken-1"
              text
              @click="submitForm">
              保存
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>

<!-- 新增岗位对话框 -->
<script>
  import { addPost } from "@/api/system/post";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "PostAddComp",
    props: {
      visible: Boolean, // 是否打开对话框
      statusOptions: Array // 状态数据字典
    },
    emits: ['updateVisible'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 表单参数
        form: {
          status: '1' // 默认正常状态
        },
        // 表单校验
        rules: {
          postName: [
            val => (val || '').length > 0 || '岗位名称不能为空'
          ],
          postCode: [
            val => (val || '').length > 0 || '岗位编码不能为空'
          ],
          postSort: [
            val => (val || '').length > 0 || '岗位顺序不能为空'
          ]
        },
        valid: false,
      };
    },
    methods: {
      validate () {
        this.$refs.form.validate();
      },
      /** 保存按钮 */
      async submitForm() {
        this.$store.commit("snackbar/CLOSE_SNACKBAR");
        await this.validate();
        if (this.valid) {
          addPost(this.form).then(res => {
            // 使用全局消息提示
            this.$store.dispatch('snackbar/openSnackbar',{
              msg: '添加成功',
              color: 'success'
            })
            this.$emit('done');
            this.updateVisible(false);
          });
        }
      },
      // 调用父级关闭对话框, 并重置表单
      updateVisible(value) {
        this.reset();
        this.$emit('updateVisible', value);
      },
      // 表单重置
      reset() {
        this.form = {
          status: "1"
        };
        if (this.$refs.form) {
          this.$refs.form.resetValidation();
        }
      },
    }
  };
</script>
